<template>
  <div class="box">

      <div>
          <img src="../assets/icons/favsion.png" alt="封面">
      </div>
      <div class="detils-box">

          <div>
              <h5>新闻时间</h5>
              <p>defrgthyghfdsdewfvgbhf</p>
          </div>
          <div class="bottom-box">
              <img src="../assets/icons/link.svg" alt=" 查看更多"><span>查看更多</span>

              <img src="../assets/icons/hot.svg" alt=" 热度"><span style="color: red;">2345</span>
              <p>更新时间：2023-09-23</p>

          </div>
      </div>

  </div>
</template>
<script setup lang="ts">
// import {ref,reactive} from "vue"




</script>
<style lang="scss" scoped>
.box {
  width: 1200px;
  height: 120px;
  box-sizing: border-box;
  display: flex;
  background: $passlink-font-color-black;
  border-bottom: 2px solid $passlink-font-color-white;
  align-items: center; /* 控制元素在垂直方向上的对齐方式 */
  padding: 10px;

  img {
      width: 80px;
      height: 80px;
      
      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.1), 2px 1px 5px 0px rgba(255, 255, 255, 0.1), 7px 4px 9px 0px rgba(255, 255, 255, 0.09), 16px 10px 12px 0px rgba(255, 255, 255, 0.05), 29px 18px 14px 0px rgba(255, 255, 255, 0.01), 46px 28px 15px 0px rgba(255, 255, 255, 0);
      border-radius:5px;
  }
  .detils-box{
      margin-left: 10px;
      width:$passlink-center-width - 100px;
      color: $passlink-font-color-white;
      font-size: $passlink-font-size14;
      h5{
          color: $passlink-font-color-yellow;
      }
      p{
          font-weight: lighter;
      }
      .bottom-box{
          display: flex;
          align-items:flex-start; /* 控制元素在垂直方向上的对齐方式 */
          width: 100%;
          span{
              font-weight: lighter;
          }
          p{
         
             margin-left: 20px;
          }
          img{
            
              margin-left: 10px;
              width: 24px;
              height:24px;
              box-shadow:none;
          }
      }
   
  }
}
</style>
